<template>
	<div class="subpage buy-order-detail-container">
		<div class="buy-detail-box">
			<div class="project-item-info">
				<div class="project-img">
					<img :src="item.smallPic" alt="">
				</div>
				<ul class="project-item-detail">
					<li>
						<p class="project-name">{{item.productName}}({{item.farmName}})</p>
					</li>
					<li>
						<span>养殖地：{{item.cattleAddress}}</span>
						<span>牧场：{{item.farmName}}</span>
					</li>
					<li>
						<span>重量：{{item.productWeight}}{{item.productWeightUnit}}</span>
						<span>单价：{{item.salesPrice}}元/kg</span>
					</li>
					<li>
						<p class="project-price">
							<span>{{item.totalPrice}}</span>{{item.productPriceUnit}}
						</p>
						<p>
						    交货期：<span class="color-primary">{{item.deliveryTime}}</span>个月
						</p>
					</li>
				</ul>
			</div>

			<div class="buy-goods-box">
				<ul class="buy-goods-top">
					<li>
						<p>我要求购</p>
						<p>{{item.totalNum}}头</p>
					</li>
					<li>
						<p>总重量</p>
						<p>{{item.totalNum * item.productWeight}}kg</p>
					</li>
					<li>
						<p>总金额</p>
						<p class="color-primary">{{item.totalNum * item.totalPrice}}元</p>
					</li>
					<li>
						<p>求购时间</p>
						<p>{{item.wantTime}}</p>
					</li>
				</ul>
			</div>

			<!-- <div class="resale_record_box">
				<div class="resale_record">
					<div class="record_head">转售记录 <van-icon name="arrow" tag="i" size="18" color="#E5E5E5" /></div>
				</div>
				<div class="resale_mock">
					<span>已转售：0头</span>
					<span>转售中：1头</span>
					<span>剩余数量：1头</span>
				</div>
			</div>
			
			<div class="resale_record_box gh_box">
				<div class="resale_record">
					<div class="record_head">供货记录 <van-icon name="arrow" tag="i" size="18" color="#E5E5E5" /></div>
				</div>
				<div class="resale_mock ">
					<span>已供货：0头</span>
					<span>供货中：0头</span>
				</div>
			</div> -->
			<div class="erbiaoId">
				<span>耳标ID</span>
				<span class="erbiao-detail" @click="toEerbiao">详情 <img src="@/assets/img/home_img28.png" alt=""></span>
			</div>
			<div class="order-address-info">
				<div class="order-info-detail-title">收货地址</div>
				<div class="delivery-address-box">
					<div class="address-detail">
						<img src="@/assets/img/delivery_location_icon.png" alt="">
						<div class="address-detail-text">
							<p><span>{{firstList.name}}</span>{{firstList.tel}}</p>
							<p>{{firstList.province}}&nbsp; {{firstList.city}}&nbsp; {{firstList.county}} &nbsp;{{firstList.addressDetail}}</p>
						</div>
					</div>
					<div class="delivery-status">
						<p class="color-gray">修改地址</p>
						<van-icon name="arrow" class="arrow-right" />
					</div>
				</div>
			</div>

			<div class="order-info-detail">
				<div class="order-info-detail-title">订单信息</div>
				<ul class="order-info-detail-list">
					<li>
						<span>购买数量</span>
						<span>{{orderData.quantity}}头</span>
					</li>
					<li>
						<span>订单金额</span>
						<span>{{orderData.orderMoney}}元</span>
					</li>
					<li>
						<span>优惠金额</span>
						<span>{{orderData.discountMoney}}元</span>
					</li>
					<li>
						<span>支付金额</span>
						<span>{{orderData.payMoney}}元</span>
					</li>
					<li>
						<span>支付方式</span>
						<span>{{orderData.payMethod}}</span>
					</li>
					<li>
						<span>合同编号</span>
						<span>{{orderData.contractCode}}</span>
					</li>
					<li>
						<span>支付时间</span>
						<span>{{orderData.orderTime}}</span>
					</li>
					<li>
						<span>订单编号</span>
						<span>{{orderData.out_trade_no}}</span>
					</li>
				</ul>
			</div>
			<div class="buy-agreement-box" @click="to">
				<span><img src="@/assets/img/contract_icon.png" alt="">友牧农场服务协议</span>
				<van-icon name="arrow" tag="i" size="18" color="#E5E5E5" />
			</div>
		</div>

		<div class="footer">
			<p class="total"><span>共{{item.totalNum}}头</span><span class="totalMoney">总计：{{item.totalNum * item.totalPrice}}元</span></p>
			<van-button round class="u-btn-default bind-btn">已完成</van-button>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				item: {},
				firstList: {},
				orderData: {}
			}
		},
		created() {
			this.getTab3Data() //  //   已完成 详情 
			this.getAddressList() // 地址
			this.getOrderDetail()
		},
		methods: {
			getOrderDetail() {
				this.$api.get('/api/supply/want_finish_detail/' + this.$route.params.id)
					.then(({data}) => {
						if(data.orderTime.indexOf('T') != -1) {
							data.orderTime = data.orderTime.replace('T', ' ');
						}
						console.log(data)
						this.orderData = data;
					})
			},
			//   已完成 详情
			getTab3Data() {
				this.$api.get('/api/supply/getSupplyOrder/' + this.$route.params.id)
					.then(({data}) => {
						this.item = data;
					})
			},
			// 获取地址列表接口
			getAddressList() {
				this.$api.post('/api/user/getaddresslist')
					.then(({
						data
					}) => {
						if (data.length > 0) {
							this.firstList = data[0];
						}
					})
			},
			to() {
				this.$router.push({
				      name: 'supplyAgreement',
				      query: {
				             id: this.orderData.contractId
				      }
				})
			},
			// 耳标详情
			toEerbiao(){
				this.$router.push({
					path: '/my/buyOrder/erbiao/' + this.item.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../tabdetailScss.scss';

	.buy-agreement-box {
		width: 100%;
		height: 53px;
		line-height: 53px;
		background-color: #fff;
		display: flex;
		justify-content: space-between;

		span {
			color: #333;
			font-size: 15px;

			img {
				width: 27px;
				vertical-align: middle;
				margin-right: 12px;
			}
		}

		i {
			margin-right: 0 !important;
		}

	}

	.order-info-detail {
		width: 100%;
		margin-bottom: 10px;
		background-color: #fff;

		.order-info-detail-title {
			width: 100%;
			padding: 16px;
			box-sizing: border-box;
			font-size: 16px;
			font-weight: 500;
			color: #344047;
			border-bottom: 1px solid #f2f2f2;
		}

		.order-info-detail-list {
			width: 100%;
			padding: 6px 16px 16px;
			box-sizing: border-box;

			li {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 10px;

				span {
					font-size: 14px;

					&:first-child {
						color: #999;
					}

					&:last-child {
						color: #666;
					}
				}
			}
		}
	}

	.order_record_box {
		background-color: #fff;

		.head {
			width: 100%;
			height: 44px;
			line-height: 44px;
			padding: 0 16px;
			font-weight: 500;
			border-bottom: 1px solid #e5e5e5;

			.inner_head {
				color: #344047;
				font-size: 16px;
			}
		}
	}

	.resale_record_box {
		background-color: #fff;

		.resale_record {
			width: 100%;
			height: 44px;
			line-height: 44px;
			padding: 0 16px;
			font-weight: 500;
			border-bottom: 1px solid #e5e5e5;

			.record_head {
				color: #344047;
				font-size: 16px;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}

		.resale_mock {
			width: 100%;
			height: 61px;
			display: flex;
			justify-content: space-between;
			padding: 0 16px;
			line-height: 61px;
			margin-bottom: 10px;

			span {
				color: #344047;
			}
		}
	}

	.resale_record_box.gh_box {
		.resale_mock {
			justify-content: flex-start;

			span {
				&:last-child {
					margin-left: 47px;
				}
			}
		}
	}

	.buy-detail-box {
		width: 100%;
		height: calc(100% - 63px);
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}

	.erbiaoId {
		width: 100%;
		height: 33px;
		line-height: 33px;
		padding: 0 16px;
		background: rgba(49, 188, 141, 0.7);
		display: flex;
		justify-content: space-between;
		margin-top: 10px;

		span {
			color: #fff;
		}

		.erbiao-detail {
			font-size: 12px;

			img {
				width: 16px;
				vertical-align: middle;
				margin-left: 4px;
			}
		}
	}

	.footer {
		width: 100%;
		height: 63px;
		padding: 0 16px;
		line-height: 63px;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #fff;
		box-shadow: 2px 2px 5px #c2c2c2;
		-webkit-box-shadow: 2px 2px 5px #c2c2c2;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.total {
			color: #F58523;
			font-size: 16px;
			font-weight: 500;
			float: left;

			.totalMoney {
				margin-left: 15px;
			}
		}

		.bind-btn {
			width: 144px;
			height: 51px;
			background: #D0CFCF;
			border-radius: 26px;
			color: #fff;
			font-size: 16px;
			box-shadow: none;
		}

	}
</style>
